<template>
  <!-- 订单详情 -->
  <div
    class="fill-base basics-layout_body mt-lg pd-20 mb-lg"
    v-if="ruleForm.buyerOrderList"
  >
    <el-alert
      v-if="ruleForm.buyerOrderList.status === 0"
      class="mb-30"
      :title="`审核未通过，驳回原因：${ruleForm.buyerOrderList.remarks}`"
      type="error"
      show-icon
    />
    <div class="c-202020 f-s-16 f-w-bold">订单详情</div>
    <!-- 订单信息 -->
    <div class="mt-20 flex-between c-202020">
      <div class="flex-y-center f-s-14">
        <div class="mr-20">订单编号：{{ ruleForm.buyerOrderList.id }}</div>
        <div class="mr-20">
          订单生成时间：{{
            filters.dateYMDHMSFormat(ruleForm.buyerOrderList.timeCreate)
          }}
        </div>
        <!-- <div>供应商：{{ ruleForm.buyerOrderList.sellerName }}</div> -->
      </div>
      <div class="f-s-14" v-if="ruleForm.buyerContractList">
        <span
          class="c-blue pointer"
          @click="onFileOpen(ruleForm.buyerContractList.url)"
          >合同：{{ ruleForm.buyerContractList.contractNb }}</span
        >
      </div>
    </div>
    <!-- 订单状态 -->
    <div class="order-status">
      <div class="order-status_left">
        <div class="status-name">{{ getStatusValues.label }}</div>
        <div class="status-remark">
          {{ getStatusValues.details }}
        </div>
        <el-button>联系卖家</el-button>
      </div>
      <div class="order-status_right">
        <el-steps :active="getStatusValues.steps">
          <el-step v-for="(item, index) in orderStepList" :key="index">
            <template #icon>
              <div
                class="order-steps_img"
                v-if="getStatusValues.steps >= index + 1"
              >
                <img src="@/assets/img/order-steps.png" />
              </div>
              <div class="breakpoint-body flex-column flex-yx-center" v-else>
                <div class="breakpoint">
                  <div class="breakpoint-layer">{{ index + 1 }}</div>
                </div>
              </div>
            </template>
            <template #title>
              <span class="f-s-14"> {{ item.title }}</span>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <!-- 详细信息 -->
    <div class="order-details" v-if="ruleForm.buyerOrderList">
      <div class="f-s-14 c-202020 f-w-bold">详细信息</div>
      <div class="order-details_content">
        <el-row>
          <el-col :span="8">
            付汇方式：{{ ruleForm.buyerOrderList.payMode }}
          </el-col>
          <el-col :span="8">
            成交方式：{{ ruleForm.buyerOrderList.tradeMode }}
          </el-col>
          <el-col :span="8">
            约定付款时间：{{ ruleForm.buyerOrderList.payTimeNode }}
          </el-col>
          <el-col :span="8" v-if="ruleForm?.product?.endHarborInfo?.harbor">
            目的港：{{ ruleForm.product.endHarborInfo.harbor }}
          </el-col>
        </el-row>
      </div>

      <div
        class="f-s-14 c-202020 f-w-bold mt-30"
        v-if="ruleForm.bankInfo && ruleForm.seller"
      >
        卖家信息
      </div>
      <div
        class="order-details_content"
        v-if="ruleForm.bankInfo && ruleForm.seller"
      >
        <el-row>
          <el-col :span="8"> 供应商：{{ ruleForm.seller.name }} </el-col>
          <el-col :span="8"> 联系方式：{{ ruleForm.seller.mobile }} </el-col>
          <el-col :span="8"> 联系邮箱：{{ ruleForm.seller.email }} </el-col>

          <!-- <el-col :span="8">
            账户名称：{{ ruleForm.bankInfo.accountName }}
          </el-col>
          <el-col :span="8">
            开户行名称：{{ ruleForm.bankInfo.bankBranchName }}
          </el-col>
          <el-col :span="8">
            银行账号：{{ ruleForm.bankInfo.accountNo }}
          </el-col> -->
          <el-col :span="8">
            给买家留言：{{ ruleForm.buyerOrderList.orderRemarks }}
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 货物 -->
    <el-tabs v-model="activeTabs" type="card" class="mt-lg">
      <el-tab-pane
        :label="`货物 ${index + 1}`"
        v-for="(item, index) in ruleForm.orderDeliveryList"
        :key="index"
        :name="index"
      >
        <div class="goods-tabs">
          <c-deliver-goods :modelValue="item" :form="ruleForm" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 车辆信息 -->
    <div class="mt-20 goods-table" v-if="ruleForm.product">
      <c-table-template
        :data="[ruleForm.product]"
        :header-cell-style="{
          background: '#F6F8FA',
          color: '#26282A',
          'font-size': '14px',
          'font-weight': '500',
        }"
      >
        <el-table-column label="车辆信息" align="center" min-width="400">
          <template #default="scope">
            <div class="flex">
              <div class="goods-img">
                <img
                  :src="scope.row.productDetail.prodcutPicList.thumbnailUrl"
                />
              </div>
              <div class="mr-lg ml-lg goods-info">
                <div class="goods-name">
                  {{ scope.row.productTitle }}
                </div>
                <div class="goods-port">
                  启运港：{{ scope.row.startHarborInfo.harbor }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="单价"
          align="center"
          width="250"
          class-name="my-cell"
        >
          <template #default="scope">
            <span>{{ ruleForm.buyerOrderList.productCurrency }}</span>
            <span class="ml-sm">{{
              filters.thousands(ruleForm.buyerOrderList.productPrice)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="数量"
          align="center"
          width="150"
          class-name="my-cell"
        >
          <template #default="scope">
            <span>×</span>
            <span>{{ ruleForm.buyerOrderList.productAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="小计"
          align="center"
          width="250"
          class-name="my-cell"
        >
          <template #default="scope">
            <span>{{ ruleForm.buyerOrderList.productCurrency }}</span>
            <span class="ml-sm">{{
              filters.thousands(ruleForm.buyerOrderList.productSumPrice)
            }}</span>
          </template>
        </el-table-column>
      </c-table-template>
    </div>

    <!-- 操作 -->
    <div class="flex-end mt-30">
      <div>
        <span class="f-s-14">订单总价：</span>
        <span class="c-EE5B5B f-s-16 mr-sm">USD</span>
        <span class="c-EE5B5B f-s-24 f-w-bold">{{
          filters.thousands(ruleForm.buyerOrderList.productSumPrice)
        }}</span>
      </div>
    </div>
    <div class="flex-end mt-30" v-if="ruleForm.buyerOrderList.status === 2">
      <el-button :loading="buttonLoading" type="primary" @click="handleConfirm"
        >确 认</el-button
      >
      <el-button :loading="buttonLoading" @click="handleRejectOpen"
        >取消订单</el-button
      >
    </div>
  </div>
  <div
    v-loading="true"
    v-else
    class="fill-base basics-layout_body mt-lg pd-20 mb-lg"
    style="height: 45vh"
  ></div>
  <c-reject ref="cRejectRef" @change="onApprove" />
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useOrderHooks } from "./components/index.js";
import cDeliverGoods from "./components/DeliverGoods.vue";
import cReject from "@/components/Reject/index.vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import { deepClone, onFileOpen } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const ruleForm = ref({});
const loading = ref(false);
const buttonLoading = ref(false);
const activeTabs = ref(0);
const cRejectRef = ref();
onMounted(() => {
  getById();
});
const getById = async () => {
  const url = "/buyerOrderList/getSellerOrderById";
  const params = route.query;
  if (params.id) {
    loading.value = true;
    const res = await proxy.$get({ url, params });
    ruleForm.value = deepClone(res);
    loading.value = false;
  }
};
const handleConfirm = () => {
  ElMessageBox.confirm("确认执行此操作吗？", "系统提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const params = {
      id: route.query.id,
      flag: true,
    };
    onApprove(params);
  });
};
const handleRejectOpen = () => {
  cRejectRef.value.handleOpen({
    flag: false,
    id: route.query.id,
  });
};
const onApprove = async (data) => {
  const url = "/buyerOrderList/approval/buyer";
  buttonLoading.value = true;
  try {
    await proxy.$post({ url, data });
    // getById();
    ElMessage.success("操作成功");
    router.go(-1);
    buttonLoading.value = false;
  } catch (error) {
    buttonLoading.value = false;
  }
};
const { orderStepList, getStatusValues } = useOrderHooks(ruleForm);
</script>
<style lang="less" scoped>
:deep(.el-table .my-cell) {
  vertical-align: top;
}
@import url("./Details.less");
</style>